<template>
	<view class="item" v-if="isShow&&listData.length>0">

		<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
			<u-icon name="clock-fill" color="#1573FF" size="16" label="审核流程" label-color="#333333"
				style="line-height: 80rpx;">
			</u-icon>

			<!-- <text style="line-height: 80rpx; color: #E93131;">{{dataBean.carDisposal.repairStatusShow|filterNull}}</text> -->
		</view>


		<u-line color="#efefef" :customStyle="{'margin-bottom': '20rpx','display': 'block',}"></u-line>


		<view v-for="(item, index) in listData" :key="index">
			<view style="display: flex;flex-direction: column;">
				<view style="display: flex;">

					<image :src="avator" mode="scaleToFill" style="width: 78rpx;height: 78rpx;margin: 0 20rpx;"></image>

					<view style="display: flex;flex-direction: column;flex: 1;margin-right: 20rpx;">
						<view style="display: flex;justify-content: space-between;">
							<text style="font-size: 30rpx;color: #333;">{{item.userName|filterNull}}</text>
							<text style="font-size: 28rpx;color: #a7a7a7;">{{item.nodeName|filterNull}}</text>
							<text style="font-size: 30rpx;color: #1573FF;">{{item.approveNodeStatus|filterNull}}</text>
						</view>
						<view style="display: flex;justify-content: space-between;margin-top: 6rpx;">
							<text style="font-size: 24rpx;color: #a7a7a7;">{{item.approveTime|filterNull}}</text>
							<text style="font-size: 24rpx;color: #a7a7a7;">耗时:{{item.elapsedTime|filterNull}}</text>
						</view>
					</view>

				</view>

				<view style="display: flex;">
					<view style="width: 2rpx;height: auto;background-color: #EFEFEF;margin:0 59rpx;" :style="{
						'opacity':index==listData.length-1?'0':'1'
					}">
					</view>

          <view style="display: flex;flex-direction: column;flex: 1">

            <text style="color: #a7a7a7;font-size: 24rpx;flex: 1;padding: 10rpx 20rpx 30rpx 0;">审核意见:{{item.approveContent|filterNull}}</text>

            <picPdf style="margin-left: -20rpx" v-if="item.approveFileList && item.approveFileList.length>0" :attachment="item.approveFileList"></picPdf>
          </view>
        </view>


			</view>

		</view>


	</view>
</template>

<script>
	import picPdf from "@/components/pic-pdf.vue";

  export default {
		name: "exam-flow",
    components: {picPdf},
		data() {
			return {
				avator: this.baseImgUrl() + 'uni_longrent/icon_circle_def.png',
				// listData: [
				// 	{
				// 	nodeName: '节点1',
				// 	approveTime: '2022-02-21 12:23:12',
				// 	elapsedTime: '2019-01-11 02:13:02',
				// 	approveStatus: 2,
				// 	userName: '张三',
				// 	approveContent: '资质不符合要求，bla啊的绯闻的速度而寂寞i风景更美似懂非懂装修风格山豆根士大夫',
				// 	approveNodeStatus: '审核不通过',
				// 	url: ''

				// }, {
				// 	nodeName: '节点2',
				// 	approveTime: '2022-02-21 12:23:12',
				// 	elapsedTime: '2019-01-11 02:13:02',
				// 	approveStatus: 1,
				// 	userName: '张三222',
				// 	approveContent: '资222质不符合要求，bla啊的绯闻的速度而寂寞i风景更美似懂非懂装修风格山豆根士大夫',
				// 	approveNodeStatus: '审核不通过222',
				// 	url: ''

				// },
				// ],
				isShow: false
			};
		},
		props: {
			//pageType
			from: {
				type: String,
				default: ''
			},
			instanceId: {
				type: String | Number,
				default: ''
			},
			approvalName: {
				type: String,
				default: ''
			},
			isForceShow: {
				type: Boolean,
				default: false
			},
			isAdd: {
				type: Boolean,
				default: false
			},
			// dlistData:{
			// 	type:Array,
			// 	default(){
			// 		return []
			// 	}
			// },
			listData:{
				type:Array,
				default(){
					return []
				}
			},
		},
    watch:{
      instanceId:{
        handler(val){
          console.log('handler', val, this.isShow)
          if(val && (!this.listData || this.listData.length<=0)){
            let activitiEnable = this.$store.state.params.activitiEnable;
            console.log('activitiEnable', activitiEnable)
            console.log('this.approvalName', this.approvalName)

            if (!uni.$u.test.isEmpty(activitiEnable) &&
              1 == activitiEnable[this.approvalName]
              // &&
              // 'fromcar' != this.from
            ) {
              this.isShow = true;

              if (this.isAdd) {
                this.$u.api.bpmInitChart({
                  processKey: this.approvalName
                }).then(res => {
                  this.listData = res;
                })
              } else if (!uni.$u.test.isEmpty(this.instanceId)) {
                this.$u.api.bpmChart({
                  processKey: this.approvalName,
                  instanceId: this.instanceId
                }).then(res => {
                  this.listData = res;
                })
              }

            } else {

              this.isShow = false;
            }
          }
        },
        immediate:true
      }
    },
		mounted() {
			let activitiEnable = this.$store.state.params.activitiEnable;

			if(this.isForceShow){
				this.isShow=true
			}else{
				if (!uni.$u.test.isEmpty(activitiEnable) &&
					1 == activitiEnable[this.approvalName]
          // &&
					// 'fromcar' != this.from
				) {
					this.isShow = true;

					if (this.isAdd) {
						this.$u.api.bpmInitChart({
							processKey: this.approvalName
						}).then(res => {
							this.listData = res;
						})
					} else if (!uni.$u.test.isEmpty(this.instanceId)) {
						this.$u.api.bpmChart({
							processKey: this.approvalName,
							instanceId: this.instanceId
						}).then(res => {
							this.listData = res;
						})
					}

				} else {

					this.isShow = false;
				}
			}

      console.log('isshow', this.isShow)

		}
	}
</script>

<style lang="scss" scoped>

</style>
